<template>
<q-page>
    <q-btn @click="handleVideo">视频</q-btn>

    <q-responsive :ratio="16 / 9" style="width: 100%">
        <video id="video" controls>视频流目前不可用。</video>
    </q-responsive>

</q-page>
</template>

<script>
export default {
    name: 'AsrPage',
    data() {
        return {
            deviceList: []
        }
    },
    mounted() {
        this.handleDeviceList()
    },
    methods: {
        handleLoadVideo(deviceId) {
            window.navigator.mediaDevices.getUserMedia({
                video: {
                    deviceId: deviceId,
                    width: {
                        min: 1024,
                        ideal: 1280,
                        max: 1920
                    },
                    height: {
                        min: 776,
                        ideal: 720,
                        max: 1080
                    },
                },
                audio: true
            }).then(mediaStream => {
                console.log(mediaStream);
                this.videoPlayer = document.getElementById('video')
                this.videoPlayer.srcObject = mediaStream;
                this.videoPlayer.play()
                // window.mediaStream = mediaStream

                // beginRecord(window.mediaStream);
            }).catch(err => {
                // 如果用户电脑没有麦克风设备或者用户拒绝了，或者连接出问题了等
                // 这里都会抛异常，并且通过err.name可以知道是哪种类型的错误
                this.$message.error('未发现摄像头设备！'+err.name)
                console.error(err);
            });
        },
        handleDeviceList() {
            navigator.usb.getDevices().then((devices) => {
                console.log(`Total devices: ${devices.length}`);
                devices.forEach((device) => {
                    console.log(
                        `Product name: ${device.productName}, serial number ${device.serialNumber}`
                    );
                });
            });
            // console.log(navigator.mediaDevices);
            //   navigator.mediaDevices.enumerateDevices().then(res=>{
            //     console.log(res);
            //         this.deviceList=res
            //   }).catch(err=>{
            //     this.$message.error('获取设备列表失败:'+err.message)
            //   })
            //   console.log(1);
            // navigator.usb.getDevices().then((devices) => {
            //     devices.forEach((device) => {console.log(device);
            //         console.log(device.productName); // "Arduino Micro"
            //         console.log(device.manufacturerName); // "Arduino LLC"
            //     });
            // }).catch(err => {
            //     this.$message.error('获取设备列表失败:' + err.message)

            // })
        },
        handleVideo() {
            window.navigator.mediaDevices.getUserMedia({
                video: {
                    width: {
                        min: 1024,
                        ideal: 1280,
                        max: 1920
                    },
                    height: {
                        min: 776,
                        ideal: 720,
                        max: 1080
                    },
                },
                audio: true
            }).then(mediaStream => {
                console.log(mediaStream);
                this.videoPlayer.srcObject = mediaStream;
                this.videoPlayer.play()
                // window.mediaStream = mediaStream

                // beginRecord(window.mediaStream);
            }).catch(err => {
                // 如果用户电脑没有麦克风设备或者用户拒绝了，或者连接出问题了等
                // 这里都会抛异常，并且通过err.name可以知道是哪种类型的错误
                this.$message.error('未发现摄像头设备！')
                console.error(err);
            });
        },

        HandleError(err) {
            console.log(err.name + "," + err.message);
        },

        GetAudioStream(mediaStream) {
            this.audioPlayer.srcObject = mediaStream;
        },
        handleRecord() {
            console.log(navigator.mediaDevices, '媒体设备');
            window.navigator.mediaDevices.getUserMedia({
                audio: {
                    sampleRate: 44100, // 采样率
                    channelCount: 2, // 声道
                    volume: 6.0 // 音量
                }
            }).then(mediaStream => {
                console.log(mediaStream);
                this.audioPlayer.srcObject = mediaStream;
                // window.mediaStream = mediaStream

                // beginRecord(window.mediaStream);
            }).catch(err => {
                // 如果用户电脑没有麦克风设备或者用户拒绝了，或者连接出问题了等
                // 这里都会抛异常，并且通过err.name可以知道是哪种类型的错误
                this.$message.error('未发现录音设备！')
                console.error(err);
            });

            // if (!window.navigator.mediaDevices || !window.navigator.mediaDevices.getUserMedia) {
            //     console.log('getUserMedia is not supported!');
            // } else {
            //     var constraints = {
            //         audio: {
            //             echoCancellation: true, // 回声消除
            //             noiseSuppression: true, // 降噪
            //             autoGainControl: true // 自动增益
            //         }
            //     };
            //     window.navigator.mediaDevices.getUserMedia(constraints)
            //         .then((res)=>{
            //           this.GetAudioStream(res)
            //         })
            //         .catch(HandleError);

            // }
        }
    }
}
</script>

<style>

</style>
